<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图标容器 -->
        <div ref="left2" style="height: 150px;margin-top: 30px;"></div>
    </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
    data() {
        return {
            title: '设备状态分布',
            // 存放设备状态数据
            empData:[]
        }
    },
    methods: {
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data:this.empData,
                angleField: 'value',
                colorField: 'type',
                color: ({ type }) => {
                    if (type === '在线') {
                        return '#a6a2ec';
                    }
                    return 'pink';
                },
                radius: 0.8,
                label: {
                    type: 'outer',
                    // content: '{name} {percentage}',  //percentage表示百分数  可以修改
                    content: '{name} {value}台',
                    // 文本设置颜色  需要在style中
                    style: {
                        fill: 'white'
                    }
                },
                legend: {
                    // 文本水平和垂直  默认vertical  layout:'vertical',  
                    position: 'top',
                    // 设置分类图例文本name属性
                    itemName: {
                        style: {
                            fill: 'white'
                        }
                    }
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });

            piePlot.render();
        },
        // 封装请求获取设备数据
        async getEmpData(){
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            // console.log(res,'222222');
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();  //不加() loadPie is not function
    }
}
</script>

<style lang="less" scoped></style>